<template>
  <div class="login">
    <div class="bg-img">
      <div class="img">
        <img
          src="../../assets/images/02忘记密码_slices/矩形背景01.png"
          alt=""
        />
      </div>
      <div class="logo">
        <img src="../../assets/images/01首页_slices/logo.png" alt="" />
      </div>
      <div class="rt">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="ruleForm.userName"
              type="text"
              autocomplete="off"
              placeholder="账户/用户名"
            >
              <template #prefix>
                <img
                  src="../../assets/images/01首页_slices/icon01.png"
                  alt=""
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input
              v-model="ruleForm.pass"
              type="password"
              autocomplete="off"
              placeholder="密码"
            >
              <template #prefix>
                <img
                  src="../../assets/images/01首页_slices/icon02.png"
                  alt=""
                />
              </template>
            </el-input>
          </el-form-item>
          <!-- <el-form-item prop="age">
            <el-input
              v-model.number="numberValidateForm.age"
              type="text"
              autocomplete="off"
              style="width: 45%; margin-right: 10px"
            />
            <el-button style="width: 45%; margin-left: 28px">验证码</el-button>
          </el-form-item> -->
          <el-form-item>
            <el-button
              type="success"
              @click="submitForm(ruleFormRef)"
              style="width: 500px"
              >登录</el-button
            >
            <span @click="go">忘记密码？</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const formRef = ref<FormInstance>();

    const numberValidateForm = reactive({
      age: "",
    });
    const router = useRouter();
    const ruleFormRef = ref<FormInstance>();
    const ruleForm = reactive({
      pass: "",
      userName: "",
    });
    const rules = reactive<FormRules>({
      userName: [
        {
          required: true,
          message: "请输入用户名长度在3到5个字符",
          min: 3,
          max: 5,
          trigger: "blur",
        },
      ],
      pass: [
        { required: true, message: "请输入密码", trigger: "change" },
        { min: 8, message: "密码最少8位数哦", trigger: "blur" },
        {
          trigger: "blur",
          validator: (rule, value, callback) => {
            // console.log(formLabelAlign.pass);
            const passwordreg =
              /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/;
            if (!passwordreg.test(value)) {
              callback(
                new Error(
                  "密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!"
                )
              );
            } else {
              callback();
            }
          },
        },
      ],
    });
    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          // console.log("submit!");
          router.push("/home");
          localStorage.setItem("token", "111");
        } else {
          console.log("error submit!", fields);
        }
      });
    };
    // 跳转注册页面
    const go = () => {
      router.push("/registry");
    };
    return {
      ruleForm,
      ruleFormRef,
      rules,
      formRef,
      numberValidateForm,
      go,
      submitForm,
    };
  },
});
</script>

<style lang="less" scoped>
.login {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  background: url("../../assets/images/01首页_slices/beijing01.png") no-repeat
    50% 50%;
  .bg-img {
    position: relative;
    margin: auto;
  }
}
.img {
  display: block;
  // width: 800px;
}
.logo {
  position: absolute;
  top: 157px;
  left: 78px;
}
.rt {
  position: absolute;
  left: 400px;
  top: 157px;
  width: 500px;
  height: 300px;
}
/deep/.el-form-item {
  height: 40px;
}
span {
  width: 100px;
  cursor: pointer;
  color: #4ca8ff;
  font-size: 12px;
  // margin-right: 10px;
  // padding-right: 20px;
  // float: right;
}
</style>
